<template>
	<view>
		<u-navbar :is-back="false" title=" " :border-bottom="false">
			<view class="slot-wrap">
				<u-tabs-swiper ref="tabs" :list="list" @change="change" :current="current" active-color="#2AC2B3"
					:is-scroll="false"></u-tabs-swiper>
			</view>
		</u-navbar>

		<swiper duration="300" class="swiper-box" :current="swiperCurrent" @change="changeIdx">
			<swiper-item>
				<scroll-view scroll-y class="scroll-view">
					<!-- <u-sticky> -->
					<view class="" style="height: 96rpx;"></view>
					<view class="topbtns topNav n-flex-row n-justify-between">
						<view class="n-flex-row">
							<view class="topbtn" :class="isSelect?'active':''" @click="all"> 待提货
							</view>
							<!-- <view class="topbtn" :class="!isSelect?'active':''" @click="yiduihuan()"> 已分解
							</view> -->
						</view>
					</view>
					
					<view class="pl_header" v-if="goodsList.length > 0">
						<view class="pl_duihuan" @click="$.to('/pages/cangku/piliang_edit?type=1')">
								<image src="../../static/image/exchange.png" mode="" class="miniicon"></image>
							<view class="left">
								<!-- <u-icon name="plus-circle-fill" style="padding-right: 10rpx;" color="#70dde0" size="36rpx"></u-icon> -->
								<text>批量分解</text>
							</view>
							<view class="right">
								去看看
								<u-icon name="arrow-right-double" style="padding-left: 10rpx;"></u-icon>
							</view>
						</view>
						<view class="pl_duihuan" @click="$.to('/pages/cangku/piliang_edit?type=2')">
								<image src="../../static/image/regift.png" mode="" class="miniicon"></image>
							<view class="left">
								<!-- <u-icon name="plus-circle-fill" style="padding-right: 10rpx;" color="#70dde0" size="36rpx"></u-icon> -->
								<text>批量赠送</text>
							</view>
							<view class="right">
								去看看
								<u-icon name="arrow-right-double" style="padding-left: 10rpx;"></u-icon>
							</view>
						</view>
					</view>
					<!-- </u-sticky> -->
					<!-- <u-empty text="仓库空空" :show="dataBuffer" mode="order"></u-empty> -->
					<!-- 全部 -->
					<view class="goodsList" v-if="smallTit == 0">
						<view class="list" v-for="(item,idx) in goodsList" :key="idx">
							<view class="goods">
								<image :src="item.goods_data.image" mode=""></image>
								<view class="info">
									<view class="tit">{{item.goods_data.title}}</view>
									<!-- <view class="bi" v-if="item.status == 0">
										可兑换：<text>{{item.exchange_integral}}</text>幸运币
									</view> -->
									<!-- <view class="time" v-else>兑换时间：{{item.exchange_time}}</view> -->
								</view>
							</view>
							<view class="tip" v-if="item.status == 0">
								<!-- <view class="tit">
									提示:请在<text>2022/11/02 00:00:00</text>前提取，过期不能提货，只能兑换
								</view> -->
								<view class="btns n-flex-row">
									<!-- <view class="btn ti" @click="zhuan = true;zhuanId = item.id"> 转赠 </view> -->
									<!-- <view class="btn ti" @click="tihuo(item)"> 提货 </view> -->
									<view class="btn ti" @click="$.to('/pages/cangku/piliang_edit?type=3&id='+item.id)"> 提货 </view>
									<!-- <view class="btn dui" @click="isagain(item.id)" v-if="cardList.length != 0"> 重抽 -->
									<!-- </view> -->
									<!-- <view class="againbox" v-if="item.exchange_integral > 0">
										<view class="again" v-if="isOne == 0">
											得重抽卡*1
										</view>
										<view class="btn dui" @click="duihuan(item)"> 兑换 </view>
									</view> -->
								</view>
							</view>
						</view>
						<view class="" style="height: 100rpx;"></view>
						<u-empty text="暂无数据" mode="list" :show="nullShow" margin-top="400"></u-empty>
					</view>
					<!-- 已分解 -->
					<view class="goodsList" v-if="smallTit == 1">
						<view class="list" v-for="(item,idx) in goodsList" :key="idx">
							<view class="goods" style="border: none;">
								<image :src="item.goods_data.image" mode=""></image>
								<view class="info">
									<view class="tit">{{item.goods_data.title}}</view>
									<view class="time">兑换时间：{{item.exchange_time}}</view>
								</view>
							</view>
						</view>
						<u-empty text="暂无数据" mode="list" :show="nullShow" margin-top="400"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y class="scroll-view">
					<view class="goodsList">
						<view class="list" v-for="(item,idx) in boxList" :key="idx">
							<view class="goods">
								<image :src="item.blind_box_data.image" mode=""></image>
								<view class="info">
									<view class="tit">{{item.blind_box_data.title}}</view>
									<view class="row">数量：{{item.num}}</view>
								</view>
							</view>
							<view class="tip">
								
								<view class="btns n-flex-row">
									<view class="btn dui" @click="kai(item.order_no,item.blind_box_id,item.num)"> 开箱 </view>
								</view>
							</view>
						</view>
					</view>
					<u-empty text="暂无数据" mode="list" :show="mangheShow"></u-empty>
				</scroll-view>
			</swiper-item>

			<swiper-item>
				<scroll-view scroll-y class="scroll-view">
					<view>
						<view class="goodsList">
							<view class="list" v-for="(item,idx) in zhuanList" :key="idx">
								<view class="goods1">
									<image :src="item.goods_data.image" mode=""></image>
									<view class="info">
										<view class="tit">{{item.goods_data.title}}</view>
										<view class="row">时间：{{item.create_time}}</view>
										<view class="row" v-if="item.status_text == '赠送他人'">受赠人：{{item.receive_nickname}}</view>
										<view class="row" v-else>赠送人：{{item.give_nickname}}</view>
									</view>
									<view class="state">{{item.status_text}}</view>
								</view>
							</view>
						</view>
					</view>
					<u-empty text="暂无数据" mode="list" :show="zhuanShow"></u-empty>
				</scroll-view>
			</swiper-item>

		</swiper>
		<!-- <view class="newagain" v-if="isOne == 0">
			新人首次兑换，额外得重抽卡*1
		</view> -->
		<u-modal v-model="show" @confirm="confirm" content="该商品已成功兑换为盲盒,前往盒柜查看"></u-modal>
		<!-- <u-modal v-model="againshow" :show-cancel-button="true" @confirm="again" content="是否使用重抽卡重抽该商品"></u-modal> -->
		<u-popup v-model="zhuan" mode="center" border-radius="20">
			<view class="zhuan">
				<view class="tit">请输入转赠人的手机号</view>
				<u-input v-model="phone" type="number" maxlength="11" :border="true" placeholder="请输入转赠人注册手机号" />
				<view class="tip">注：一旦转赠成功不可退货，请谨慎操作</view>
				<view class="btns1">
					<view class="btn11 a" @click="zhuan = false">取消</view>
					<view class="btn11 b" @click="zhuanz">确定</view>
				</view>
			</view>
		</u-popup>
		
		<u-tabbar v-model="current" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import {tabbar} from "@/common/tabbar.js"
	export default {
		data() {
			return {
				tabbar:tabbar,
				current : 4,
				nullShow: false,
				mangheShow: false,
				zhuanShow: false,
				list: [{
					name: '仓库'
				}, 
				// {
				// 	name: '盒柜'
				// }, 
				// {
				// 	name: '赠送'
				// },
				],
				current: 0,
				swiperCurrent: 0,
				dataBuffer: true,
				isSelect: true,
				smallTit: 0,
				goodsList: [],
				isOne: '0',
				boxList: [],
				cardList: [],
				show: false,
				againshow: false,
				againId: '',
				zhuan: false,
				phone: '', //转赠人手机号
				zhuanId: '',
				zhuanList: [],
			}
		},

		onLoad() {
			uni.$on('sc', (data) => {
				if (data == 0) {
					this.current = 0
				}
				if (data == 1) {
					this.current = 1
				}
			})
		},
		onUnload() {
			uni.$off('sc')
		},
		onShow() {
			this.all()
			this.getCard()
		},
		//计算属性
		computed: {
			allSelect: {
				set: function(newVal) {
					this.goodsList.forEach(item => {
						item.check = newVal
					})
				},
				get: function() {
					return this.goodsList.every(item => {
						return item.check == true
					})
				}
			}
		},
		methods: {
			zhuanzheng(){
				this.zhuan = true;
				let arr = []
				this.goodsList.forEach(item => {
					if (item.check == true) {
						arr.push(item.id)
					}
				})
				if(arr.length == 1){
					arr = arr[0]
				}
				console.log(arr);
				this.zhuanId = arr
				if(arr.length == 0){
					this.$tip.tip("请选择商品")
					return
				}
			},
			// 确定转赠
			zhuanz() {
				if (!this.$u.test.mobile(this.phone)) {
					this.$tip.tip("请输入正确的手机号")
					return
				}
				this.$http({
					url: "api/order/prize_give",
					data: {
						id: this.zhuanId,
						receive_username: this.phone
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.zhuan = false
						this.phone = ""
						this.current = 2
						this.swiperCurrent = 2
						this.$tip.tip(res.data.msg)
					} else {
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			kai(id, boxfl_id,num) {
				uni.navigateTo({
					url: '/pages/home/luckbox'
				})
				setTimeout(() => {
					uni.$emit('paydata', {
						ooid: id,
						id: boxfl_id,
						num: num
					})
				}, 600)


			},
			isagain(id) {
				this.againId = id
				this.againshow = true
			},
			// 重抽
			again(id) {
				if (this.cardList.length == 0) {
					this.$tip.tip("没有可使用的重抽卡")
					return
				}
				this.$http({
					url: "api/order/redraw_prize",
					data: {
						card_id: this.cardList[0].id,
						id: this.againId
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.show = true
						this.getCard();
					}else{
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			// 获取重抽卡
			getCard() {
				this.$http({
					url: "api/member/get_my_card",
				}).then(res => {
					if (res.data.code == 1) {
						let data = res.data.data;
						let data_list = [];
						data.forEach((item, index)  => {
							if(item.card_data.type == 1){
								item = item;
								data_list.push(item)
							}
						})
						this.cardList = data_list
					}
				}).catch(err => {});
			},
			//未开盒的盲盒
			getBox() {
				this.$http({
					url: "api/order/get_blind_box_order",
				}).then(res => {
					if (res.data.code == 1) {
						if (res.data.data.length == 0) {
							this.mangheShow = true
						} else {
							this.mangheShow = false
						}
						this.boxList = res.data.data

					} else {
						this.boxList = []
						this.mangheShow = true
					}
				}).catch(err => {});
			},
			// 前往盒柜
			confirm() {
				this.getBox()
				this.current = 1
				this.swiperCurrent = 1
			},
			// 全部
			all() {
				this.isSelect = true;
				this.smallTit = 0
				this.getData(0)
			},
			// 已分解
			yiduihuan() {
				this.isSelect = false;
				this.smallTit = 1
				this.getData(2)
			},
			getData(sta) {
				uni.showLoading({
					title: "加载中"
				})
				this.goodsList = []
				this.$http({
					url: "api/order/get_prize_record",
					data: {
						status: sta
					}
				}).then(res => {
					uni.hideLoading()
					console.log(res, "商品");
					if (res.data.code == 1) {

						if (res.data.data.list.length == 0) {
							this.nullShow = true
						} else {
							this.nullShow = false
						}
						res.data.data.list.forEach(item => {
							item.check = false
						})
						this.goodsList = res.data.data.list

						this.isOne = res.data.data.cck
					} else {
						this.nullShow = true
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			change(index) {
				this.current = index;
				this.swiperCurrent = index;
			},
			// 页面改变
			changeIdx(idx) {
				this.current = idx.detail.current
				this.swiperCurrent = idx.detail.current
				if (this.current == 0) {
					this.all()
				} else if (this.current == 1) {
					this.getBox()
				} else if (this.current == 2) {
					this.getZhuan()
				}
			},
			// 转赠记录
			getZhuan() {
				uni.showLoading({
					title: "加载中"
				})
				this.$http({
					url: "api/order/prize_give_log",
				}).then(res => {
					uni.hideLoading()
					if (res.data.code == 1) {
						if (res.data.data.length == 0) {
							this.zhuanShow = true
						} else {
							this.zhuanShow = false
						}
						this.zhuanList = res.data.data
					} else {
						this.zhuanShow = true
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			tihuo(item) {
				let data = {
					image: item.goods_image,
					name: item.goods_name,
					yunfei: item.delivery_fee
				}
				uni.setStorageSync('tihuo', data)
				uni.navigateTo({
					url: '/pages/cangku/confirmOrder?id=' + item.id
				})
			},
			duihuan(item) {
				let data = [{
					image: item.goods_data.image,
					name: item.goods_data.title,
					price: item.exchange_integral,
					id:item.id
				}]
				uni.setStorageSync('dui', data)
				uni.navigateTo({
					url: '/pages/cangku/duihuan?id=' + item.id
				})
			},
		}
	}
</script>

<style>
	@import url("../../common/css/cangku.css");
</style>
